<template>
  <div class="PsdModel">
    <div class="title">
      <span>密码修改</span>
      <el-icon @click="onClose"><Close /></el-icon>
    </div>
    <div class="container">
      <el-form ref="PsdFormRef" :model="PSDForm" :rules="rules" status-icon>
        <el-form-item label="原密码:" prop="old_password" class="formItem">
          <el-input
            type="password"
            :prefix-icon="Lock"
            v-model="PSDForm.old_password"
            clearable
            show-password
            @keyup.enter.native="submitForm(PsdFormRef)"
            placeholder="请输入原密码"
          />
        </el-form-item>

        <el-form-item label="新密码:" prop="password" class="formItem">
          <el-input
            type="password"
            :prefix-icon="Lock"
            v-model="PSDForm.password"
            @keyup.enter.native="submitForm(PsdFormRef)"
            clearable
            show-password
            placeholder="请输入新密码"
          />
        </el-form-item>

        <el-form-item
          label="确认密码:"
          prop="password_confirmation"
          class="formItem"
        >
          <el-input
            type="password"
            :prefix-icon="Lock"
            v-model="PSDForm.password_confirmation"
            @keyup.enter.native="submitForm(PsdFormRef)"
            clearable
            show-password
            placeholder="请再次输入新密码"
          />
        </el-form-item>

        <el-form-item class="formItem btn">
          <el-button type="info" @click="onClose">取 消</el-button>
          <el-button
            type="success"
            @click="submitForm(PsdFormRef)"
            :loading="loading"
            >提 交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { validatePhone } from "@/utils";
import { Lock } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { putUserPSD } from "@/api";
import { useAppStoreWidthOut } from "@/store/modules/app";
const appStore = useAppStoreWidthOut();
const { push } = useRouter();

const emits = defineEmits(["close", "submit"]);
const PsdFormRef = ref();

const PSDForm = reactive({
  old_password: null,
  password: null,
  password_confirmation: null,
});

// 输入密码
const validatePass = (rule, value, callback) => {
  if (!value) {
    callback(new Error("密码不能为空"));
  } else if (value.trim().length < 8) {
    callback(new Error("密码不能少于8位"));
  } else {
    if (PsdFormRef.password_confirmation) {
      if (!PSDForm.value) return;
      PSDForm.value.validateField("password_confirmation", () => null);
    }
    callback();
  }
};

// 确认密码
const validateComfirmPsd = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请再次输入确认密码"));
  } else if (value !== PSDForm.password) {
    callback(new Error("二次密码不一致，请再次输入"));
  } else {
    callback();
  }
};

const rules = reactive({
  old_password: [
    {
      required: true,
      trigger: "blur",
      message: "请输入原密码",
    },
  ],
  password: [{ required: true, validator: validatePass, trigger: "blur" }],
  password_confirmation: [
    { required: true, validator: validateComfirmPsd, trigger: "blur" },
  ],
});
// 提交用户密码修改
const loading = ref(false);
const doBind = async () => {
  loading.value = true;
  try {
    await putUserPSD({ ...PSDForm });
    ElMessage.success("密码成功");
    setTimeout(() => {
      sessionStorage.removeItem("authToken");
      appStore.clearRouteTags();
      push("/auth/login");
    }, 500);
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};
// 提交
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      doBind();
    } else {
      console.log("error submit!", fields);
    }
  });
};
const onClose = () => emits("close");
</script>

<style scoped lang="less">
@import "./style";
</style>
